<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title id="tt">爸爸节的关怀——数据堂</title>
    <meta id="share-title" name="title" content="爸爸节的关怀——数据堂" />
    <meta id="share-text" name="description" content="爸爸节的关怀——数据堂" />
    <meta id="share-image" name="image" content="./image/1.jpg" />
    <meta id="share-link" name="share-link" content="" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,minimal-ui">
    <link rel="stylesheet" href="dest/css/style.min.css">
    <link rel="stylesheet" href="dest/css/add.css">
</head>

<body style="background-image: url('./image/0.jpg');">
	<div id="loading">
	    <div id="spinner"></div>
	    <div id="protext">loading</div>
	</div>

	<div class="swiper-container">
		<div class="pagination"></div>
	  <div class="swiper-wrapper">
	      <div class="swiper-slide gra_1 play">
	      	<img src="./image/1.jpg">
	        <div class="btn-down">
	            <div class="btn-down-arraw"><img src="./image/btn-up.png"></div>
	        </div>
	      </div>
	      
	      <div class="swiper-slide gra_2">
				<img src="./image/2.jpg" id="img2">
		        <div class="btn-down" style="z-index: 66">
		            <div class="btn-down-arraw"><img src="./image/btn-up.png"></div>
		        </div> 	
		        <div id="form" >
					<input type="text" placeholder="请输入您的车牌号" id="carnum">
					<a id="carbtn">
						<img src="./image/btn.jpg" width="60px" height="33px;">
					</a>
				</div>	
	      </div>
	      
	      <div class="swiper-slide gra_3"> 
	      	<img src="./image/3.jpg" id="img3">
	      	<div class="btn-down">
	      	    <div class="btn-down-arraw"><img src="./image/btn-up.png"></div>
	      	</div>
	        <div id="i30"></div>
	        <div id="i31"></div>
	        <div id="i32"></div>
	        <div id="i33"></div>
	        <div id="i34"></div>
	        <div id="i35"></div>
	        <div id="i36" ></div>
	      </div>

		<div class="swiper-slide gra_4">
			<img src="./image/4.jpg" alt="">
			<div class="btn-down">
			    <div class="btn-down-arraw"><img src="./image/btn-up.png"></div>
			</div>
		</div>
		
	  </div>
	</div>
	
	<div class="sound"></div>
    <div class="sound_bg sound_running" ></div>
    
    		
    
	<script src="./dest/js/libs.min.js"></script>
	
	<script type="text/javascript">
		var audio,flags = true,autoPlay = true;
		
		window.onload=function(){
			
			setTimeout(function(){
				audio = document.createElement("audio");
				audio.id = "music";
				audio.src = "./dest/music.mp3";
				audio.loop = "loop";
				$(".sound").append(audio);
				document.getElementById("music").play();
			}, 500);
			
			$(".sound_bg").click(function(e) {
				var f = document.getElementById("music");
				if (flags) {
					f.pause();
					$(this).removeClass("sound_running").addClass("sound_paused");
					flags = false;
				} else {
					f.play();
					$(this).removeClass("sound_paused").addClass("sound_running");
					flags = true;
				}
			});
			
			
			
			var h=$("#img2").offset().top;
			var w=$("#img2").width(); 
			//var ih=$("#img2").width();
			//var iw=$("#img2").height(); 
			//var hh=document.body.scrollHeight;
			$("#form").attr("style","display:block;height:40px;width:"+0.9*w+"px;position: relative;top: -"+(0.315*h)+"px;left: 15px;");
			$("#carnum").attr("style","display:block;float:left;height: 30px;width:"+w/2+"px;line-height: 30px;margin-left: 20px;border: 0;font-size:18px;");
			$("#carbtn").attr("style","display:block;float:right;margin-right: 1px;cursor: pointer;");
			
			$("#carbtn").click(function(){
				var p=$("#carnum").val();
				$.post("./aaa",{"p":p},function(jsonstr){
					var ss=jsonstr.split(",");
					var s1=ss[0];
					var s2=ss[1];
					var s3=ss[2];
					carchk(p,s1, s2, s3);
					alert("下滑看结果~")
				});
			});
			
			$("#carbtn").blur(function(){
				var p=$("#carnum").val();
				$.post("./aaa",{"p":p},function(jsonstr){
					var ss=jsonstr.split(",");
					var s1=ss[0];
					var s2=ss[1];
					var s3=ss[2];
					carchk(p,s1, s2, s3);
					alert("下滑看结果~")
				});
			});
			
			//
			$.post("./pv");
			
		};
		
		function carchk(p,s1,s2,s3){
			var ss={"A":"超级无敌好爸爸！您的驾驶习惯良好，<br>您是孩子可信赖的依靠，宝宝以你为荣！","B":"令人尊敬的爸爸！您的驾驶习惯有待提升，<br>您在孩子眼中有很多优点，如果去掉生活中的<br>小瑕疵就更好啦!","C":"上升空间广阔的爸爸 您需要改正一下驾驶习惯啦，<br>您的一举一动会潜移默化地影响孩子，<br>改掉坏习惯，做个好榜样，加油！","D":"还不够称职哟，望改进!"};
			var n1=Number(s1);
			var n2=Number(s2);
			var n3=Number(s3);
			var n=n1+n2+n3;
			var k,v;
			if(n<2&&n>=0){
				k="A";
				v=ss[k];
			}else if(n<4&&n>=2){
				k="B";
				v=ss[k];
			}else{
				k="C";
				v=ss[k];
			}
			
			var h=$("#img3").offset().top;
			var w=$("#img3").width(); 
			$("#tt").text(v);
			$("#share-title").attr("content",v);
			$("#share-text").attr("content",v);
			$("#share-image").attr("content","./image/"+k+".gif");
			//share-title,i30
			$("#i30").text("您的车牌号是:"+p+",");
			$("#i31").text(s1);
			$("#i32").text(s2);
			$("#i33").text(s3);
			$("#i34").html("您的驾车安全等级为<b style='color:red;font-size:16px;'>"+k+"</b>级");
			$("#i35").html(v);
			$("#i36").html("<img src='./image/"+k+".gif' width='50px' height='50px'/><br>右上角分享朋友圈证明你是好爸爸~~");
			
			$("#i30").attr("style","font-family:Microsoft YaHei;font-size:16px;display:block;position: relative;top: -"+(0.92*h)+"px;left: "+(0.23*w)+"px;");
			
			$("#i31").attr("style","font-family:Microsoft YaHei;font-size:18px;display:block;position: relative;top: -"+(0.83*h)+"px;left: "+(0.23*w)+"px;");
			$("#i32").attr("style","font-family:Microsoft YaHei;font-size:18px;display:block;position: relative;top: -"+(0.78*h)+"px;left: "+(0.23*w)+"px;");
			$("#i33").attr("style","font-family:Microsoft YaHei;font-size:18px;display:block;position: relative;top: -"+(0.73*h)+"px;left: "+(0.23*w)+"px;");
			
			$("#i34").attr("style","font-family:Microsoft YaHei;font-size:18px;display:block;position: relative;top: -"+(0.69*h)+"px;left: "+(0.03*w)+"px;");
			$("#i35").attr("style","font-family:Microsoft YaHei;font-size:18px;display:block;position: relative;top: -"+(0.65*h)+"px;left:5px;");//text-align:left;
			$("#i36").attr("style","font-family:Microsoft YaHei;font-size:18px;display:block;position: relative;top: -"+(0.61*h)+"px;left:5px;");//border:1px red solid;
		}
		
		
		
		function toggleSound() {
			if (autoPlay) {
				autoPlay = false;
				var a = document.getElementById("music");
				if (a.paused) {
					a.play()
				}
			}
		};
	</script>
	
	
</body>
</html>